<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>填充颜色</title>
</head>
<body>
<canvas id="canvas" width="500" height="800"></canvas>
<script>
  var ctx = document.getElementById('canvas').getContext('2d');
  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(100, 100);
  var c = 0;

  // transform(m11, m12, m21, m22, dx, dy)
  // m11：水平方向的缩放
  // m12：水平方向的倾斜偏移
  // m21：竖直方向的倾斜偏移
  // m22：竖直方向的缩放
  // dx：水平方向的移动
  // dy：竖直方向的移动

  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    ctx.fillRect(0, 0, 100, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }

  // ctx.resetTransform(); === ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.setTransform(-1, 0, 0, 1, 100, 100);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
</script>
</body>
</html>